<template>
	<view class="">
		<view v-if="!htmls" class="box">

			<view>
				<view class="u-page">
					<view v-if="current==0" class="page1">
						<u-icon @click="back" class="back" name="home-fill" color="#2c2c2c" size="45"></u-icon>
						<view class="title">
							购买须知
						</view>
						<view class="subtit">
							以下内容为本产品的重要信息，请仔细阅读
						</view>
						<view class="subtit">
							一、 健康告知
						</view>
						<view class="words words1">
							激活服务时需符合如下健康状况，如不符合购买后，高端细胞服务无法使用。
						</view>
						<view class="words">
							1. 未曾被医疗机构确诊或诊断疑似患有恶性肿瘤（包括癌症、白血病、 淋巴瘤、骨髓瘤）、癌前病变、原位癌、类癌、肝硬化、不明性质肿瘤/
							新生物/肿块/息肉/结节；肿瘤标志物或组织及其细胞病理学检查异常；
						</view>
						<view class="words">
							2. 1年内未有下列症状：血尿、蛋白尿、便血（非痔疮出血）或黑便、 进食梗噎感或吞咽困难、中重度度贫血（Hb<90g /l）、不明原因皮下出血
								点或紫癜、运动障碍或失调、不明原因持续或反复发热（超过2周）；不 明原因的持续或间歇性疼痛（超过 1个月）；乳头异常溢液或糜烂、被建 议病理学检查或穿刺检查； </view>
								<view class="words">
									3. 被保险人未曾患有遗传性疾病，先天性畸形、变形或染色体异常。
								</view>
								<view class="subtit">
									二、本产品服务信息
								</view>
								<view class="words words1">
									本产品购买规则，激活服务续符合
								</view>
								<view class="words">
									1. 客户年龄：18-75 周岁
								</view>
								<view class="words">
									2. 服务生效规则：购买后，成功激活后第二个工作日生效
								</view>
								<view class="words">
									3. 服务有效期：1 年
								</view>
								<view class="words">
									4. 服务对象：仅限客户本人使用
								</view>
								<view class="words">
									5. 等待期：30 天
								</view>
								<view class="words">
									6. 既往症限制说明：基础服务中“重疾绿通服务”、全护卡服务，限既往症 不能使用；全护卡、高端细胞疗法，需符合不同产品健康告知，具体关注电子 手册详细说明。
								</view>
								<view class="words">
									7. 服务申请及说明请登录公众号，下载及阅读服务使用手册
								</view>
								<view class="product-reviews title">
									我已阅读继续购买
								</view>
								<view class="list ">
									<view @click="buyCard('1')" v-if="type==1" class="li">
										<div class="cardBox">
											<div class="nameAndSign">
												<div class="name_shadow">瑞享延年优享 个人卡</div>

											</div>
											<div class="timeBox">
												<div class="timeTxt">有效期</div>
												<div class="timeVal">购买后365天内有效</div>
											</div>
											<div class="priceBox_shadow">
												<div class="priceSign">￥</div>
												<div class="priceVal">399</div>
											</div>

											<div class="buyBtn J_buyBtn">购买</div>
										</div>
									</view>

									<view @click="buyCard('2')" v-else class="li li1">
										<div class="cardBox">
											<div class="nameAndSign">
												<div style="color: #f2dbb4; opacity: 1;" class="name_shadow">瑞享延年优享 家庭卡
												</div>

											</div>
											<div class="timeBox">
												<div class="timeTxt">有效期</div>
												<div class="timeVal">购买后365天内有效</div>
											</div>
											<div class="priceBox_shadow" style="color: #f2dbb4; opacity: 1;">
												<div class="priceSign">￥</div>
												<div class="priceVal">799</div>
											</div>

											<div class="buyBtn J_buyBtn">购买</div>
										</div>
									</view>
								</view>
								<view class="quanyi">
									<view class="title1">
										专属权益
									</view>
									<view @click="show=true" class="detail">
										权益说明<u-icon name="arrow-right" color="#666" size="22"></u-icon>
									</view>
								</view>
								<view class="icons">
									<view class="item">
										<view class="icon">
											<image src="../../../static/img/ABUIABAEGAAgjqWTuQYotID0yAQw6Ac46Ac.png"
												mode=""></image>
										</view>
										<view class="intro">
											{{type==1?'个人卡':'家庭卡'}}员卡
										</view>
									</view>
									<view class="item">
										<view class="icon">
											<image src="../../../static/img/ABUIABAEGAAgjaWTuQYoiryDkQcw6Ac46Ac.png"
												mode=""></image>
										</view>
										<view class="intro">
											12小时在线客服
										</view>
									</view>
								</view>
								<!-- 权益说明 -->
								<u-popup :closeable="true" border-radius="14" mode="bottom" v-model="show">
									<view class="content">
										<view class="title2">
											权益说明
										</view>
										<view class="rule">
											本产品购买规则，激活服务续符合
										</view>
										<view class="intro1">
											<view class="">
												1. 客户年龄：18-75 周岁
											</view>
											<view class="">
												2. 服务生效规则：购买后，成功激活后第二个工作日生效
											</view>
											<view class="">
												3. 服务有效期：1 年
											</view>
											<view class="">
												4. 服务对象：仅限客户本人使用
											</view>
											<view class="">
												5. 等待期：30 天
											</view>
											<view class="">
												6. 既往症限制说明：基础服务中“重疾绿通服务”、全护卡服务，限既往症 不能使用；全护卡、高端细胞疗法，需符合不同产品健康告知，具体关注电子
												手册详细说明。
											</view>
											<view class="">
												7. 服务申请及说明请登录公众号，下载及阅读服务使用手册
											</view>
										</view>
									</view>
								</u-popup>
								<foo />
						</view>

					</view>


				</view>




			</view>
			<view v-else>
				<view v-html="htmls">

				</view>
			</view>
		</view>


</template>
<script>
	import foo from "../msg/footer.vue";
	export default {
		components: {
			foo
		},
		props: ['type', 'parm', 'mobile'],
		data() {
			return {
				curproductId:'',
				htmls: null,
				current: 0,
				list: [{
						iconPath: "shopping-cart",
						selectedIconPath: "shopping-cart-fill",
						text: '购买产品',
						customIcon: false,
					},
					{
						iconPath: "phone",
						selectedIconPath: "phone-fill",
						text: '电话咨询',
						customIcon: false,
					},

					{
						iconPath: "file-text",
						selectedIconPath: "file-text-fill",
						text: '订单查询',
						customIcon: false,
					}
				],

				show: false,

			}

		},
		onLoad(e) {
			// console.log(e, 4444);
			// this.type = e.type
		},
		mounted() {
			uni.createSelectorQuery().select('.product-reviews').boundingClientRect((rect) => {
								console.log(rect.top)
								if (rect) {
									uni.pageScrollTo({
										scrollTop: rect.top,
										duration: 300
									});
								}
							}).exec();
		},
		methods: {
			buyCard(val) {
				
				this.curproductId = val

				uni.showLoading({
					title: "正在支付...",
					mask: true,
				});
				var userAgent = navigator.userAgent.toLowerCase();
				
				let payChannle = '';
				let payType = '';
				// 用户使用的是微信浏览器
				// if (userAgent.indexOf('micromessenger') !== -1) {
				// 	payChannle='WXPAY';
				// 	payType='JSAPI'
				// }else{
				// 	// 非微信
				// 	payChannle='ALIPAY'
				// 	payType='H5'
				// }
				
				payChannle='ALIPAY'
				payType='H5'
				// 判断是微信还是支付宝

				this.$u.api.toPay({
						"parm": this.parm,
						"productId": val,
						"mobile": this.mobile,
						payType,
						payChannle
					})
					.then(res => {
						console.log(res.data, 88888888);
						
						// if (userAgent.indexOf('micromessenger') !== -1) {
						// 	console.log('用户使用的是微信浏览器');
							
						// 	WeixinJSBridge.invoke(
						// 	 'getBrandWCPayRequest', {
						// 	     "appId":res.data.appId, //公众号名称，由商户传入
						// 	     "timeStamp":res.data.timeStamp, //时间戳     
						// 	     "nonceStr":res.data.nonceStr, //随机串     
						// 	     "package": res.data.package,
						// 	     "signType":res.data.signType, //微信签名方式：     
						// 	     "paySign":res.data.paySign //微信签名 
						// 	 },
						// 	 function(ress) {
						// 	   // alert(ress.err_msg)
						// 	     if (ress.err_msg == "get_brand_wcpay_request:ok") {
						// 	         uni.showToast({
						// 	             icon: 'success',
						// 	             title: '支付成功'
						// 	         })
						// 			 uni.navigateTo({
						// 			 	url:"/pages/sys/login/suc"
						// 			 })
											
						// 	        // uni.navigateBack()
											
						// 	     } else if (ress.err_msg == "get_brand_wcpay_request:cancel") {
						// 	         uni.showToast({
						// 	             icon: "none",
						// 	             title: "'已取消支付"
						// 	         })
						// 	     } else {
						// 	         uni.showToast({
						// 	             icon: "none",
						// 	             title: "支付失败"
						// 	         })
						// 	     }
						// 	 });
						
						if (userAgent.indexOf('micromessenger') !== -1) {
							
								console.log('用户使用的是微信浏览器');
								uni.navigateTo({
									url:'/pages/sys/login/mid?parm='+this.parm+'&mobile='+this.mobile+'&productId='+this.curproductId
								})
						}
						 else {
							//将表单渲染进页面
							this.htmls = res.data.alipayForm;
							this.$nextTick(() => {
								setTimeout(() => {
									window.document.forms[0].submit()
								}, 1000)
							})
							console.log('用户使用的不是微信浏览器');
						}




					});

			},
			back() {
				uni.navigateTo({
					url: "/pages/sys/msg/list?parm=" + this.parm
				})
			}

		}
	}
</script>

<style scoped>
	page {
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.box {
		.back {
			position: fixed;
			left: 20px;
			top: 20px;
		}

		padding: 0 36rpx;

		.content {
			padding: 20px;

			.title2 {
				font-size: 17px;
				font-weight: bold;
				text-align: center;
				margin-bottom: 15px;
				text-align: center;
			}

			.rule {
				color: #333;
				font-size: 15px;
				font-weight: bold;
				margin-bottom: 10px;

			}

			.intro1>view {
				margin-bottom: 5px;
				text-align: justify;
				color: #414141;
			}
		}

		.icons {
			margin-bottom: 20px;
			display: flex;
			align-items: center;

			.item {
				margin-right: 30px;

				.intro {
					margin: 10px 0 0;
				}

				.icon {
					margin: 0 auto;
					border: 1px solid #c7a34c;
					border-radius: 50%;
					height: 52px;
					overflow: hidden;
					border-radius: 50%;
					width: 52px;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 25px;
						height: 25px;
					}
				}
			}
		}

		.quanyi {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20px 0;

			.title1 {
				color: #353535;
				font-size: 14px;
				font-weight: 700;



			}

			.detail {
				display: flex;
				align-items: center;
			}
		}

		.title {
			color: #333;
			font-size: 18px;
			font-weight: bold;
			text-align: center;
			padding: 20px 0;
		}

		.subtit {
			color: #666;
			font-size: 14px;
			font-weight: bold;
			padding: 0 0 20px 0;
		}

		.words {
			color: #666;
			font-size: 14px;
			margin-bottom: 12rpx;
			text-align: justify;
		}

		.words1 {
			margin-bottom: 30rpx;
		}

		.list {

			.li {
				margin: 0 auto;
				width: 100%;
				height: 300rpx;
				background: url('../../../static/img/img4.png') no-repeat;
				background-size: cover;
				border-radius: 20rpx;
				box-shadow: 0 15rpx 20rpx 0 rgba(51, 51, 51, .12);
				position: relative;


				.cardBox {
					margin-bottom: 20px;
				}

				.cardBox .nameAndSign {
					align-items: baseline;
					display: flex;
					left: 20px;
					position: absolute;
					top: 15px
				}


				.cardBox .nameAndSign .name_shadow,
					{
					font-size: 23px;
					font-weight: bolder;
				}

				.cardBox .nameAndSign .name_shadow {
					color: #fff;
					opacity: 0.7;
					text-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
				}

				.cardBox .nameAndSign .sign {
					background: #000;
					border-radius: .34rem;
					color: #fff;
					display: inline-block;
					font-size: .43rem;
					height: .68rem;
					line-height: .68rem;
					margin-left: .32rem;
					opacity: .5;
					text-align: center;
					vertical-align: text-top;
					width: 1.75rem
				}

				.cardBox .timeBox {
					bottom: 20px;
					color: #fff;
					font-size: 13px;
					left: 20px;
					opacity: .7;
					position: absolute
				}

				.cardBox .priceBox {
					color: #fff;
					position: absolute;
					right: 20px;
					top: 50px
				}

				.cardBox .priceBox .priceSign {
					display: inline-block;
					font-size: 14px;
					vertical-align: text-bottom
				}

				.cardBox .priceBox .priceVal {
					display: inline-block;
					font-size: 20px;

					vertical-align: baseline
				}

				.cardBox .priceBox_shadow {
					color: #fff;
					opacity: 0.7;
					text-shadow: 3px 3px 3px rgba(0, 0, 0, .2);
					position: absolute;
					right: 20px;
					top: 40px
				}

				.cardBox .priceBox_shadow .priceSign {
					display: inline-block;
					font-size: 14px;

					vertical-align: text-bottom
				}

				.cardBox .priceBox_shadow .priceVal {
					display: inline-block;
					font-size: 30px;

					vertical-align: baseline
				}

				.cardBox .buyBtn {
					background: rgba(0, 0, 0, .5);
					border-radius: 40px;
					bottom: 20px;
					color: #fff;
					font-size: 17px;
					font-weight: 400;
					// padding: 2px 12px;
					position: absolute;
					right: 20px;
					width: 80px;
					height: 35px;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					font-weight: bold;

					background: url('../../../static/img/buyBtn1.png') no-repeat;
					background-size: cover;
					color: #926120;
					animation: pulse 1s infinite;

				}

				@keyframes pulse {
					0% {
						transform: scale(1);
						// box-shadow: 0 0 0 0 rgba(157, 104, 34, 0.7);
					}

					70% {
						transform: scale(1.1);
					}

					// box-shadow: 0 0 10px 10px rgba(157, 104, 34, 0.7);
					100% {
						transform: scale(1);
						// box-shadow: 0 0 0 0 rgba(157, 104, 34, 0.7);
					}
				}

				.cardBox .rightIco {
					bottom: 1rem;
					color: #fff;
					font-size: .5rem;
					height: .43rem;
					line-height: .43rem;
					opacity: .8;
					position: absolute;
					right: .92rem;
					text-align: center
				}

				.rightsBox .titleBox {
					font-size: 0;
					height: .64rem;
					line-height: 0;
					margin-top: 1.28rem;
					position: relative
				}

				&.li1 {
					background: url("../../../static/img/cardBg3.png");
					background-size: cover;
				}


			}

		}

	}
</style>
